import React from 'react';
import {
  TouchableOpacity,
  View,
  Text,
} from 'react-native';

import BasePage from '../common/BasePage';
import Config from '../../config';
import SizeUtils from '../../common/SizeUtils';
import TImage from '../../components/TImage';

export default class JifenChoujiangItemContentPage extends BasePage {
  constructor(props) {
    super(props);
  }

  _dealRender() {
    return (
      <View style={{width:SizeUtils.getWindowSize().width,
          height:SizeUtils.getWindowSize().height,
          paddingTop:Config.paddingTop}}>
        {this._renderIcon()}
        {this._renderName()}
        {this._renderDesc()}
        {this._renderNavigationBar()}
        {this._renderBottom()}
      </View>
    )
  }

  _renderIcon() {
    return (
      <View style={{width:SizeUtils.getWindowSize().width, flexDirection:"row",
          justifyContent:"center", paddingTop:SizeUtils.translateDesignHeightToCode(40),
      }}>
        <TImage source={{uri:this._getData().image_url}} style={{width:200, height:200}} resizeMode={"contain"}/>
      </View>
    )
  }

  _renderName() {
    return (
      <View style={{width:SizeUtils.getWindowSize().width, flexDirection:"row",
          justifyContent:"center", paddingTop:SizeUtils.translateDesignHeightToCode(30),
          paddingLeft:SizeUtils.translateDesignWidthToCode(40),
          paddingRight:SizeUtils.translateDesignWidthToCode(40),
      }}>
        <Text style={{fontSize:SizeUtils.translateFontSizeToCode(36)}}>
          {"物品名字: " + this._getData().name}
        </Text>
      </View>
    )
  }

  _renderDesc() {
    return (
      <View style={{width:SizeUtils.getWindowSize().width, flexDirection:"row",
          justifyContent:"center", paddingTop:SizeUtils.translateDesignHeightToCode(80),
          paddingLeft:SizeUtils.translateDesignWidthToCode(40),
          paddingRight:SizeUtils.translateDesignWidthToCode(40),
      }}>
        <Text style={{fontSize:SizeUtils.translateFontSizeToCode(30)}}>
          {"物品描述: "}
        </Text>
        <Text style={{fontSize:SizeUtils.translateFontSizeToCode(30)}}>
          {this._getData().desc}
        </Text>
      </View>
    )
  }

  _renderBottom() {
    return (
      <TouchableOpacity style={{width:SizeUtils.getWindowSize().width, backgroundColor:"#db3132",
          height:SizeUtils.translateDesignHeightToCode(100), flexDirection:"row",
          justifyContent:'center', alignItems:"center", position:"absolute",
          bottom:0}} onPress={this._onPress.bind(this)}>
          <Text style={{fontSize:SizeUtils.translateFontSizeToCode(36),
              color:"#ffffff", textAlign:"center"}}>
            返 回
          </Text>
      </TouchableOpacity>
    )
  }

  _onPress() {
    this.goBack();
  }

  _getData() {
    return this.props.pageData.routeData.itemData;
  }
}
